$(() => { 
    let $banner_wrapper = $(".swiper-wrapper");
    let $banner_bg = $(".con");
    let arr = [];
    let options = {
        url: "../json/index_banner.json"
    }
    $.ajax(options)
        .then(res => {
            // console.log(res.data);
            let html = "";
            let banner_samll = "";
            for (let attr in res.data) {
                // console.log(res.data[attr]);
                html += `<div class="swiper-slide">
                            <img src="${res.data[attr].img_url}" alt="">
                         </div>`
                arr.push(res.data[attr].banner_bg);

            }
            // console.log(arr);
            let i = 1;
            let all_time = 3000;
            let t = setInterval(() => {
                // console.log(arr[i]);
                $banner_bg.css({
                    backgroundColor: arr[i],
                    transition : "all 1s"
                })
                i++;
                if( i === arr.length) {
                    i = 0 ;
                }
            }, all_time)

            $banner_wrapper.html(html);

            var mySwiper = new Swiper('.banner_swiper', {
                autoplay: true,//可选选项，自动滑动 
                delay: all_time + 1,
                loop: true,
                effect: 'fade',
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        })
})